<script>
export default {
  name: 'treeTools',
  props: {
    treeNode: {
      type: Object,
      required: true
    },
    isRoot: {
      type: Boolean,
      default: false
    },
    showCompanyName: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    /*
     *点击菜单项触发的事件回调	参数是dropdown-item的指令
     *  command参数:add(添加部门)、edit(编辑部门)、delete(删除部门)
     *  id参数:当前点击的部门ID
     */
    handleCommand(command, id) {
      // 向父组件触发自定义事件
      this.$emit('handle-command', { command, id })
    }
  },
  emits:['handle-command']
}
</script>

<template>
  <el-row type="flex" align="middle">
    <el-col :span="20">
      <i class="el-icon-s-cooperation" v-if="showCompanyName"></i>
      <span class="dept-name">{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" align="middle">
        <el-col :span="12">
          <span class="responsible-name">{{ treeNode.manager }}</span>
        </el-col>
        <el-col :span="12">
          <el-dropdown @command="handleCommand($event,treeNode.id)">
            <el-button type="primary" size="mini">
              <span class="controls">操作</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu>
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot&&!treeNode.children" command="delete">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.el-row {
  width: 100%;

  .el-icon-s-cooperation {
    margin-right: 8px;
  }

  .el-col-12 {
    display: flex;
    justify-content: center;
  }
}
</style>
